<script setup lang="ts">
import {getShowList} from "@/api/more";
import {onMounted, reactive, ref} from "vue";

const list=ref()
getShowList().then(res=>{
    if (res.code === 200){
        list.value = res.rows.map(item =>{
            item.goodsImage = 'http://192.168.5.120:8199' + item.goodsImage
            return item
        })
        // list.value.isRunning = false
        // list.value.baseRunAngle = 360 * 5
        // list.value.prizeId = 0
    }
    // console.log(list)
})
const prizeWrap = ref<any>(null)
// console.log(prizeWrap)

</script>

<template>
    <div>
        <!--大转盘-->
        <!--大转盘外圈-->
        <div class="turntable"  ref="prizeWrap">
            <div class="prize-item" v-for="item in list" :key="item.goodsId">
                <img :src="item.goodsImage" alt="">
                <p>{{item.goodsName}}</p>
            </div>
        </div>
        <div class="turntable-button"></div>
    </div>
</template>

<style scoped lang="less">
//大转盘区域
//大转盘外圈
.turntable {
    width: 270px;
    height: 270px;
    margin: 55px auto 0;
    background-image: url("@/assets/images/转盘-外圈.png");
    background-size: 270px 270px;
    position: relative;

    .prize-item{
        //border: 2px solid red;
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        margin: auto;

        img{
            width: 10%;
            height: 5%;
            margin: 40px auto 10px;
        }

        p{
            color: white;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
            width: 40px;
            overflow: hidden;

        }

    }

}
.turntable-button {
  position: absolute;
  top: 160px;
  left: 110px;
  width: 115px;
  height: 115px;
  margin: auto;
  background-image: url("@/assets/images/抽奖.png");
    background-color: white;
  background-size: 115px 115px;
  text-align: center;
  line-height: 120px;
}
</style>